<!-- 密码找回 -->
<template>
  <div class>
    <!-- <div class="head">
      <span>密码找回</span>
      <span @click="loginClick">登录界面</span>
    </div> -->

    <el-card class="container">
      <div class="user">
        <label for="username">账号</label>
        <input
          type="text"
          name="username"
          id="username"
          placeholder="请输入账号"
          ref="username"
        />
      </div>
      <div class="email">
        <label for="email">邮箱</label>
        <input
          type="email"
          name="email"
          id="email"
          placeholder="请输入邮箱号"
          ref="email"
        />
      </div>
      <div class="verificat">
        <input type="text" name="verificat" placeholder="验证码" ref="verf" />
        <p class="send">
          <span>|</span>
          <span class="sendVer" @click="isSend && sendClick()" ref="sendVer">{{
            sendInfo
          }}</span>
        </p>
      </div>
      <div class="verificat">
        <input type="submit" value="确认" @click="subClick" />
      </div>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props:["userType"],
  data() {
    //这里存放数据
    return {
      sendInfo: "发送验证码",
      isSend: true /* 是否可以点击发送验证码 */,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    sendClick() {
      const email = this.$refs["email"].value;
      let emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

      if (email != "") {
        if (emailReg.test(email)) {
          // 开始计时
          let time = 60;
          let timer = setInterval(() => {
            if (time != 0) {
              time -= 1;
              this.isSend = false;
              this.sendInfo = time + "秒后重新发送";

              console.log(time, this.sendInfo);
            } else {
              clearInterval(timer);
              this.sendInfo = "发送验证码";
              this.isSend = true;
            }
          }, 1000);

          //  发送验证码
        } else {
          alert("你输入的邮箱号不对");
        }
      } else {
        alert("邮箱号不能为空");
      }
    },
    //发送邮件验证码
    sendMail() {
      var userType = this.$cookie.get("userType");
      this.$http({
        url: this.$http.adornUrl(
          `/edu-oss/sendMail/${userType}/${this.$store.state.user.id}/${this.dataForm.mail}`
        ),
        methods: "get",
      }).then((data) => {
        this.isload = false;
        if (data.data.code == 20000) {
          this.Countdown();
        } else {
          this.$message.error(data.data.message);
        }
      });
    },
    subClick() {
      const username = this.$refs["username"].value;
      const email = this.$refs["email"].value;
      const verf = this.$refs["verf"].value;
      let emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

      if (emailReg.test(email)) {
        console.log("全部正确");

        // 发送密码到邮箱
        alert("密码已发送到邮箱，请注意查收");

        // 返回登录界面
      }
    },

    // 返回登录界面
    loginClick() {
      console.log("返回登录界面");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.head {
  padding: 20px 40px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #3a8bff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.container {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}
.container .user,
.container .email,
.container .verificat {
  display: flex;
  flex-direction: column;
  height: 70px;
}

.container label {
  text-indent: 1rem;
  margin-bottom: 5px;
  color: slateblue;
}
input:hover {
  border-color: #3a8bff;
}
input {
  height: 35px;
  width: 320px;
  border-radius: 40px;
  font-size: 16px;
  text-indent: 1rem;
  outline: none;
  border: 1px solid #d4d6d9;
}
input[type="submit"] {
  text-indent: 0;
  color: slateblue;
}
input[type="submit"]:hover {
  background: #f0f6ff;
}
input::placeholder {
  font-size: 15px;
  color: cornflowerblue;
}
.container .verificat {
  position: relative;
  padding-top: 10px;
}
.container .verificat .send {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 54px;
  margin-right: 16px;
  font-size: 16px;
  cursor: pointer;
  color: cornflowerblue;
}
</style>